<!DOCTYPE html>
<html lang="en">
<!-- 网上找的程序，少了鼠标移出自动复原，鼠标切入时会变化-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <header>
        <div><img src="https://assets.codepen.io/2002878/bilibili-autumn-1.png"></div>
        <div><img src="https://assets.codepen.io/2002878/bilibili-autumn-2.png"></div>
        <div><img src="https://assets.codepen.io/2002878/bilibili-autumn-3.png"></div>
        <div><img src="https://assets.codepen.io/2002878/bilibili-autumn-4.png"></div>
        <div><img src="https://assets.codepen.io/2002878/bilibili-autumn-5.png"></div>
        <div><img src="https://assets.codepen.io/2002878/bilibili-autumn-6.png"></div>
    </header>
</body>

</html>

<script>
    const images = document.querySelectorAll('header > div > img')
    document.querySelector('header').addEventListener('mousemove', (e) => {
        let percentage = e.clientX / window.outerWidth
        let offset = 10 * percentage
        let blur = 20

        for (let [index, image] of images.entries()) {
            offset *= 1.3
            //越往后的图片位移越多

            let blurValue = (Math.pow((index / images.length - percentage), 2) * blur)
            image.style.setProperty('--offset', `${offset}px`)
            image.style.setProperty('--blur', `${blurValue}px`)
        }
    })
</script>

<style>
    body {
        margin: 0;
    }

    header {
        height: 160px;
        position: relative;
        overflow: hidden;
    }

    header>div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        /* justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。使用 align-content 属性对齐交叉轴上的各项（垂直）。这里是为了上下左右居中   */
        justify-content: center;
        align-items: center;
        /* 预设值*/
        --offset: 0px;
        --blur: 2px;
    }

    header>div>img {
        display: block;
        height: 100%;
        width: 110%;
        object-fit: cover;

        transform: translatex(var(--offset));
        filter: blur(var(--blur));
    }
</style>